<template>
    <div>
      <div class="background"></div>
      <div class="header">
        <img src="../assets/img/logo.webp" style="width: 200px;">
        <div class="jump">
          <span @click="back">返回</span>
          <span @click="Tochat">聊天</span>
          <span @click="Toreport">举报</span>
          <span @click="Touesr">个人中心</span>
        </div>
      </div>
      <div class="item-container">
        <img :src="item.image" alt="Item Image" class="item-img" style="height: 350px;width: 590px;" @click="changeImage"></img>
        <div class="item-info">
          <div class="item-message">
            <h1>{{ item.name }}</h1>
            <p><span class="price" style="color: red;font-size: 30px;">￥{{ item.price }}</span></p>
            <p class="description" style="font-size: 24px;">商品描述：{{ item.description }}</p>
            <p class="quantity" style="font-size: 24px;">商品库存:{{ item.quantity }}</p>
          </div>
          <div class="cart">
            <button @click="addToCart()" class="cart-btn">加入购物车</button>
            <img src="../assets/img/购物车.png" class="cart-img" @click="ToCart()"></img>
          </div>
          <div class="detail">
            <div class="detail-left" @click="Detail()" style="background-color: rgb(247, 170, 17);width: 47%;border-radius: 10px;">
              商品详情
            </div>
            <div class="detail-right" @click="Comment()" style="background-color: rgb(247, 170, 17);width: 47%;border-radius: 10px;">
              商品评价
            </div>
          </div>
        </div>
      </div>
      <div class="product-detail" v-if="showDetail">
        <div class="detail-img">
          <div class="detail-row" v-for="(img, index) in images" :key="index">
            <div class="detail-img-box">
              <img :src="img.path" alt="Detail Image">
            </div>
          </div>
        </div>
      </div>
      <div class="comment" v-if="showComment">
      <div v-for="review in pendingReviews" :key="review.id" class="comment-item">
        <p><strong>{{ review.username }} 评论了:</strong></p>
        <p>{{ review.review }}</p>
      </div>
    </div>
    </div>
  </template>
  
  
  <script>
import axios from 'axios';

export default {
  data() {
    return {
      item: {},
      showDetail: false,
      showComment: false,
      pendingReviews: [],
      images: []
    };
  },
  computed: {
    filteredReviews() {
      return this.pendingReviews.filter(review => review.productId === this.item.id);
    }
  },
  methods: {
    fetchPendingReviews() {
      axios.get('http://localhost:8080/api/orders/reviews/really')
        .then(response => {
          // 过滤出与当前商品ID匹配的评论
          const itemId = this.item.id;
          this.pendingReviews = response.data.filter(review => review.productId === itemId);
        })
        .catch(error => {
          console.error("Error fetching pending reviews:", error);
        });
    },
    addToCart() {
      var itemId = this.$route.params.id;
      axios.put('http://localhost:8080/cart', { id: itemId })
        .then(response => {
          console.log('Item added to cart:', response.data);
          this.$message({
            type: 'success',
            message: '已成功加入购物车',
          });
        })
        .catch(error => {
          console.error('Error adding item to cart:', error);
        });
    },
    ToCart() {
      this.$router.push('/cart');
    },
    Detail() {
      this.showDetail = !this.showDetail;
      if(this.showComment==true){
        this.showComment=false;
      }
    },
    Comment() {
      this.showComment = !this.showComment;
      if (this.showComment) {
        this.fetchPendingReviews();
      }
      if(this.showDetail==true){
        this.showDetail=false;
      }
    },
    back() {
      this.$router.push('/mainpage');
    },
    Tochat() {
      this.$router.push('/chat');
    },
    Touesr() {
      this.$router.push('/userPage');
    },
    Toreport() {
      this.$router.push('/report');
    }
  },
  async created() {
    try {
      var itemId = this.$route.params.id;
      const originalResponse = await axios.post(`http://localhost:8080/api/products/${itemId}`);
      this.item = originalResponse.data;

      const imagesResponse = await axios.get(`http://localhost:8080/api/images/img/${itemId}`);
      this.images = imagesResponse.data;
    } catch (error) {
      console.error("Failed to fetch product images:", error);
    }
  }
};
</script>
  
  <style scoped>
  .header {
  display: flex;
  gap: 60%;
  align-items: center;
}

.jump {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 36px;
}

.jump span {
  cursor: pointer;
  transition: color 0.3s;
}

.jump span:hover {
  color: red;
}

.item-container {
  margin-left: 30%;
  margin-top: -100px;
  border: 1px solid black;
  width: 600px;
  max-height: 100vh; /* 限制商品容器的最大高度为视口高度 */
  overflow-y: auto; /* 如果内容溢出，启用垂直滚动条 */
}

.item-message {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

.item-info {
  width: 100%;
  background-color: whitesmoke;
  height: auto; /* 自动高度，根据内容自适应 */
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
}

.item-info img {
  max-width: 100%; /* 图片最大宽度不超过容器宽度 */
  max-height: 300px; /* 图片最大高度，避免超出屏幕 */
  object-fit: contain; /* 图片填充方式为保持比例并且完整显示在容器内 */
  margin: 10px; /* 图片之间的间距 */
}

.description {
  font-size: 24px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.quantity {
  font-size: 24px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.cart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.cart-btn {
  cursor: pointer;
  transition: color 0.3s;
  font-size: 26px;
  padding: 10px 20px;
  background-color: red;
  width: 80%;
}

.cart-btn:hover {
  color: rgb(45, 141, 196);
}

.cart-img {
  width: 20%;
  height: 50px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.cart-img:hover {
  background-color: red;
}

.background {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/img/背景.webp');
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.detail {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 24px;
  margin-top: 20px;
  text-align: center;
}

.detail div {
  cursor: pointer;
  transition: color 0.3s;
  padding: 10px;
  box-sizing: border-box;
}

.detail div:hover {
  color: red;
}

.product-detail {
  margin-top: 20px;
  padding: 10px;
  box-sizing: border-box;
}

.detail-img {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-row {
  display: flex;
  justify-content: center; /* 确保图片居中对齐 */
  margin-bottom: 20px; /* 图片之间的垂直间距 */
}

.detail-img-box {
  display: flex;
  justify-content: center; /* 图片居中对齐 */
  align-items: center;
}

.detail-img-box img {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
}

.comment {
  margin-top: 20px;
  padding: 10px;
  box-sizing: border-box;
}

.comment .comment-item {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid black;
}

  </style>
  
  